import {StyleSheet} from 'react-native';
import {useResponsive} from 'react-native-responsive-hook';
import Colors from './Colors';

// Define the useStyles hook
export const useStyles = () => {
  const {
    isLandscape,
    isPortrait,
    wp,
    hp,
    vw,
    vh,
    rem,
    rf,
    isIOS,
    isAndroid,
    breakpointGroup,
  } = useResponsive(); // Destructure all properties from useResponsive

  // Utilize the hook values to create dynamic styles
  const styles = StyleSheet.create({
    popUpContainer: {
      backgroundColor: 'white',
      borderRadius: 20,
      paddingVertical: hp(2),
    },
    popUpTitleContainer: {
      justifyContent: 'space-between',
      backgroundColor: 'white',
      marginTop: hp(1),
      marginHorizontal: wp(1),
    },
    popUpTitleStyle: {
      color: Colors.primaryColor,
      fontWeight: 'bold',
      fontSize: rem(11),
      marginLeft: wp(1),
    },
    popUpInputContainerStyle: {
      marginVertical: hp(1),
      marginHorizontal: wp(2),
      justifyContent: 'center',
      alignItems: 'stretch',
    },
    popUpInputRowStyle: {
      flexDirection: 'row',
      alignItems: 'center',
      borderRadius: hp(3),
      borderColor: '#CDD1D4',
      borderWidth: 1,
      height: hp(4),
      marginTop: hp(2),
      paddingLeft: wp(2),
      paddingRight: wp(2),
    },
    popUpInputTextStyle: {marginLeft: wp(1), flex: 1, fontSize: rem(8)},
    popUpButtonContainerStyle: {
      marginHorizontal: wp(1),
      marginVertical: hp(1),
      borderColor: '#CDD1D4',
      borderWidth: 1,
      paddingHorizontal: wp(8),
    },
    container: {
      flex: 1,
      backgroundColor: isLandscape ? 'lightblue' : 'gray', // Change background color based on orientation
      alignItems: 'center',
      justifyContent: 'center',
    },
    text: {
      color: 'white',
      fontSize: rem(16), // Use rem for font size
      fontFamily: isIOS ? 'Helvetica' : 'Roboto', // Use different font families for iOS and Android
    },
    personalStatusTextStyle: {
      color: 'white',
      fontSize: rem(12),
      textAlign: 'left',
      fontWeight: 'bold',
      marginLeft: 20,
    },
  });

  return {styles};
};

export const useStyleConstants = () => {
  const {wp, hp, rem} = useResponsive();

  const STYLES = {
    BIGGEST_FONT_SIZE: rem(35),
    BIGGER_FONT_SIZE: rem(25),
    FIRST_FONT_SIZE: rem(18),
    SECOND_FONT_SIZE: rem(16),
    THIRD_FONT_SIZE: rem(14),
    HALF_FONT_SIZE: rem(12),
    FOURTH_FONT_SIZE: rem(9),
    TEXT_FONT_SIZE: rem(8),
    TEXT_SMALL_SIZE: rem(7),
    MARGIN_SPACE_1: wp(1),
    MARGIN_SPACE_2: wp(2),
    MARGIN_SPACE_5: wp(5),
    TEXT_COLOR: ' #343536',
    HEIGHT_LEVEL_1: hp(2),
    HEIGHT_LEVEL_2: hp(3),
    HEIGHT_LEVEL_3: hp(4),
    HEIGHT_LEVEL_HALF: hp(6),
    HEIGHT_LEVEL_4: hp(8),
    WIDTH_LEVEL_1: wp(2),
    WIDTH_LEVEL_2: wp(3),
    WIDTH_LEVEL_3: wp(4),
    WIDTH_LEVEL_4: wp(5),
    WIDTH_QUATER: wp(20),
  };
  return {STYLES};
};

export default {useStyles};
